import { Button, Drawer, Radio, Space, Checkbox } from 'antd';
import React, { useEffect, useState } from 'react';
import setColStyle from "./setColumns.module.scss"
const TableColumnsSetModal = ({
    columns = Array,
    useColumns = Array,
    setUseColumns = Function,
    show = false,
    setShow = Function,
    title = "抽屉弹窗",
    placement = "right"
}) => {
    const onClose = () => {
        setShow(false);
    };

    const [tempList, setTempList] = useState(useColumns.map(item => item.title));
    useEffect(() => {
    }, [])
    const onChange = (list) => {
        // console.log(list)
        setTempList(list)
    };

    const onSave = () => {
        // 保存
        let newColumns = [];
        columns.forEach(item => {
            if (tempList.includes(item.title)) {
                newColumns.push(item)
            }
        })
        setUseColumns(newColumns)
        onClose()
    }
    return (
        <>

            <Drawer
                title={title}
                placement={placement}
                closable={false}
                onClose={onClose}
                open={show}
                key={placement}
                width={300}
                destroyOnClose={true}
            >

                <Space
                    direction="vertical"
                    size={20}
                >
                    <Checkbox.Group className={setColStyle.setColStyle}
                        options={columns.map(item => item.title)}
                        defaultValue={useColumns.map(item => item.title)}
                        onChange={onChange}
                    />
                    <Button onClick={() => onSave()} type='primary'>保存配置</Button>
                </Space>
            </Drawer>
        </>
    );
}
export default TableColumnsSetModal;